<template>
  <div>
    <div class="recommend">
      <div class="swiper" ref="photo">
        <ul :style="`transform:translateX(${distanceX}px)`" :class="isTransition == true ? 'tt' : 'tn'"
          @transitionend="addTransitionEnd">
          <li v-for="(item, i) in arr">
            <img :src="item.img + `@760w_380h.jpg`" alt="" srcset="" />
          </li>
        </ul>
        <div class="swiper-point">
          <ol>
            <li v-for="(item, i) in this.length" @click="index = i" :class="key == i ? 'active' : ''"></li>
          </ol>
        </div>
      </div>

      <my-lazy v-if="isShow"></my-lazy>
      <div class="hot" v-if="!isShow">
        <div class="hot-com">
          <h4>热门推荐</h4>
        </div>
        <div class="hot-list">
          <ul>
            <li v-for="(item, i) in rec">
              <!-- <router-link to="/detail"> -->
              <img :src="item.img" alt="" srcset="" @click="getCom(i)" />
              <!-- </router-link> -->
              <div class="hot-title">
                <h3>{{ item.title }}</h3>
                <span>{{ item.styleName }}</span>
              </div>
              <div class="hot-pol">
                <span>{{ item.sub }}</span>
                <p>
                  <span> {{ item.total | number }}</span>
                </p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
@import "../static/style/variable.scss";

.swiper {
  position: relative;
  width: 90%;
  height: 10.3333rem;
  margin: 4rem auto 1.6rem;
  overflow: hidden;

  ul {
    width: 500%;
    height: 100%;
    // transition: all 0.5s;
    display: flex;

    &.tt {
      transition: transform 0.5s;
    }

    &.tn {
      transition: none;
    }

    li {
      width: 100%;
      height: 100%;

      img {
        width: 100%;
        height: 100%;
        border-radius: 10px;
      }
    }
  }

  ol {
    position: absolute;
    bottom: 0.5rem;
    left: 45%;
    display: flex;

    li {
      width: 0.5rem;
      height: 0.5rem;
      background-color: #fff;
      // opacity: 0.9;
      border-radius: 50%;
      margin-left: 0.2667rem;

      &.active {
        background-color: hotpink;
      }
    }
  }
}

.hot {
  .hot-com {
    width: 100%;
    height: 1.3333rem;
    padding: 0 0.48rem;
    border-left: 2.5px solid pink;
  }

  .hot-list {
    width: 90%;
    height: 26.6667rem;
    margin: 0.5333rem auto;

    // background-color: pink;
    ul {
      li {
        width: 100%;
        height: 10.6667rem;
        margin-bottom: 4.3333rem;

        img {
          width: 100%;
          height: 100%;
          border-radius: 10px;
        }

        .hot-title {
          display: flex;

          h3 {
            font-weight: 400;
          }

          span {
            // display: block;
            text-align: center;
            background-color: #f1f1f1;
            // line-height: 1.5333rem;
            font-size: 10px;
            border-radius: 8px;
            padding: 3px 8px;
            margin-left: 0.5333rem;
            margin-top: 0.32rem;
            color: $color;
          }
        }

        .hot-pol {
          margin-top: 0.2667rem;
          display: flex;
          justify-content: space-between;
          color: $color;
          font-size: 13px;
        }
      }
    }
  }
}
</style>
<script>
import lazyCom from "../components/lazyCom.vue";
import { banner, homeRecommend, comicDetail } from "@/request";
export default {
  name: "recommend",
  components: {
    "my-lazy": lazyCom,
  },
  data() {
    return {
      index: 0,
      key: 0,
      width: 0,
      timer: null,
      distanceX: 0,
      isTransition: true,
      arr: [],
      length: 0,
      rec: [],
      comId: 0,
      isShow: true,
    };
  },
  filters: {
    number(count) {
      if (count > 1000) {
        return (count / 10000).toFixed(2) + "w";
      } else {
        return count;
      }
    },
  },
  methods: {
    init() {
      this.$nextTick(() => {
        if (this.$refs["photo"]) {
          let dom = this.$refs["photo"];
          let v1 = getComputedStyle(dom)["width"];
          this.width = parseFloat(v1);
          // console.log(this.width);
        }
      });
      this.timer = setInterval(() => {
        this.autoPlay();
      }, 2000);
    },
    autoPlay() {
      this.index++;
      this.isTransition = true;
      this.distanceX = -(this.index * this.width);
      this.key++;
      if (this.key > this.length - 1) {
        this.key = 0;
      }
    },
    addTransitionEnd() {
      // console.log("test")
      if (this.index > this.length - 1) {
        // 动画切换第二张图
        this.index = 0; // 执行autoPlay方法会 index ++
        // 移除过渡
        this.isTransition = false;
        // 设置ul标签的位移
        this.distanceX = 0;
      }
    },
    // 通过导航点控制图片切换
    setPoint(num) {
      // 控制图片和导航点的索引值
      this.index = num;
      // 设置ul标签的位移
      this.distanceX = -(this.index * this.width);
      this.key = num;
    },
    getCom(i) {
      this.comId = this.rec[i].id;
      // console.log(this.comId);
      // comicDetail({ comic_id: this.comId }).then((content) => {
      //   console.log(content);
      // });
      this.$router.push({
        //添加需要传值到那个页面的路径
        path: "/detail",
        //携带需要传递的参数
        query: { id: this.comId },
      });
      localStorage.setItem("comid", this.comId);
    },
  },
  mounted() {
    this.init();
  },
  created() {
    this.isShow = true;
    banner().then((content) => {
      let { data } = content;
      let banner = data.map((item) => {
        let obj = {};
        obj.id = item.id;
        obj.title = item.title;
        obj.img = item.img;
        return obj;
      });
      this.arr = banner;
      this.arr.push(this.arr[0]);
      this.length = this.arr.length - 1;
      // console.log(this.length);
    });

    homeRecommend().then((content) => {
      // console.log(content);
      let { list } = content.data;
      // console.log(list);
      let homeRec = list.map((item) => {
        let obj = {};
        obj.id = item.comic_id;
        obj.title = item.title;
        obj.img = item.img;
        obj.total = item.comment_total;
        obj.styleName = item.styles[0].name;
        obj.sub = item.sub_title;
        return obj;
      });
      this.rec = homeRec;
      this.isShow = false;
    });
  },
};
</script>